<template>
  <el-card class="box-card">
    <!-- 搜索区域 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输入书名" v-model="queryInfo.bookTitle">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="findAll()"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="borrowId"
        label="借阅编号"
        align="center"
        style="width: 25%"
      >
      </el-table-column>
      <el-table-column
        prop="bookTitle"
        label="书名"
        align="center"
        style="width: 25%"
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="借阅人"
        align="center"
        style="width: 25%"
      >
      </el-table-column>
      <el-table-column
        prop="borrowTime"
        label="借阅时间"
        align="center"
        style="width: 25%"
      >
      </el-table-column>
      <el-table-column
        prop="checkTime"
        label="审核时间"
        align="center"
        style="width: 25%"
      >
      </el-table-column>
      <el-table-column prop="status" label="审核状态" style="width: 25%">
        <template v-slot="scope">
          <span
            >{{
              scope.row.status === 0
                ? '待审核'
                : scope.row.status === 2
                ? '审核不通过'
                : '审核通过'
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" style="width: 25%" align="center">
        <template slot-scope="scope">
          <el-button
            type="danger"
            v-if="scope.row.status === 0"
            @click="del(scope.row, 0)"
            >取消申请<i class="el-icon-remove-outline"></i
          ></el-button>
          <el-button
            type="primary"
            v-if="scope.row.status === 1"
            @click="del(scope.row, 1)"
            >归还 <i class="el-icon-remove-outline"></i
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.page"
      :page-sizes="[1, 3, 5, 7]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      // 条件
      queryInfo: {
        page: 1,
        pageSize: 5,
      },
      total: 0,
      info: {},
    }
  },
  created() {
    this.findAll()
  },
  methods: {
    // 获取当前时间
    getCurrentTime() {
      let yy = new Date().getFullYear()
      let mm =
        new Date().getMonth() + 1 < 10
          ? '0' + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1
      let dd =
        new Date().getDate() < 10
          ? '0' + (new Date().getDate() + 1)
          : new Date().getDate() + 1
      let hh =
        new Date().getHours() < 10
          ? '0' + new Date().getHours()
          : new Date().getHours()
      let mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      let ss =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      return yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
    },
    // 每页显示多少条数据回调
    handleSizeChange(pageSize) {
      this.queryInfo.pageSize = pageSize
      // 回到第一页
      this.queryInfo.page = 1
      this.findAll()
    },
    // 当前页发生改变的回调
    handleCurrentChange(page) {
      this.queryInfo.page = page
      this.findAll()
    },
    async findAll() {
      // 获取用户ID
      this.queryInfo.userId = window.localStorage.getItem('uid')

      const { data: res } = await this.$http.post(
        '/borrow/findAll',
        this.queryInfo
      )
      this.tableData = res.dataList
      this.total = res.count
    },
    del(row, type) {
      // 取消申请
      if (type === 0) {
        this.$confirm('确定取消申请吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$http.post(`/borrow/delete`, row).then((res) => {
              if (res.data.code == '200') {
                this.$message({
                  type: 'success',
                  message: '取消申请成功!',
                })
                this.findAll()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作',
            })
          })
      }

      // 归还
      if (type === 1) {
        this.info = row
        this.info.returnTime = this.getCurrentTime()
        console.log(this.info)
        this.$confirm('确定归还吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$http.post(`/record/save`, this.info).then((res) => {
              if (res.data.code == '200') {
                this.$message({
                  type: 'success',
                  message: '归还成功!',
                })

                // 删除该借阅记录
                this.$http.post(`/borrow/delete`, row).then((res) => {
                  if (res.data.code == '200') {
                    this.findAll()
                  }
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作',
            })
          })
      }
    },
  },
}
</script>

<style>
</style>